<template>
	<svg class="svg-icon" :style="svgStyle" aria-hidden="true">
		<use :xlink:href="iconName" />
	</svg>
</template>

<script setup lang="ts">
import { computed, defineComponent } from 'vue';

defineComponent({ name: 'SvgIcon' });
const props = defineProps({
	name: {
		type: String,
		required: true
	},
	width: {
		type: [Number, String],
		default: 0
	},
	height: {
		type: [Number, String],
		default: 0
	},
	color: {
		type: String,
		default: 'currentColor'
	}
});

const iconName = computed(() => `#icon-${props.name}`);
const svgStyle = computed(() => ({
	width: props.width ? `${props.width}px` : '100%',
	height: props.height ? `${props.height}px` : '100%',
	fill: props.color
}));
</script>

<style scoped>
.svg-icon {
	display: inline-block;
	vertical-align: middle;
}
</style>